import { Avatar, Divider, List, Skeleton, Col, Row, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import { useNavigate } from 'react-router-dom';
import { deleteAdmin, getAdmin, getAllAdmin } from '../../apis/admin'
import '../../assets/css/AdminList.scss'
import { useAppDispatch } from '../../store/hooks';
import { changeInfo } from '../../store/modules/admin';

interface DataType {
  gender: string;
  user: string;
  email: string;
  password: string;
  id: number,
  icon: any,
  checkedKeys: any[],
}

export const AdminList = () => {
  const [adminInfo, setAdminInfo] = useState([])
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<DataType[]>([]);
  const [page, setPage] = useState(1)
  const limit = 10
  const dispatch = useAppDispatch()
  const navigate = useNavigate()

  const getList = async () => {
    let res: any = await getAllAdmin()
    setAdminInfo(res)
  }


  const loadMoreData = () => {
    if (loading) {
      return;
    }
    setLoading(true);
    const params = {
      _page: page,
      _limit: limit
    }

    getAdmin(params)
      .then((body: any) => {
        console.log("body", body);

        setData([...data, ...body.data]);
        setLoading(false);
        setPage(page + 1)
        // data.forEach(item=>{
        //   console.log("thunmUrl",item.icon.thumbUrl);

        // })
      })
      .catch(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    getList()
    loadMoreData();
  }, []);

  return (
    <div
      id="scrollableDiv"
      style={{
        height: 400,
        overflow: 'auto',
        padding: '0 16px',
        border: '1px solid rgba(140, 140, 140, 0.35)',
      }}
    >
      <InfiniteScroll
        dataLength={data.length}
        next={loadMoreData}
        hasMore={data.length % 10 === 0}
        loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
        endMessage={<Divider plain>没有更多数据了！ 🤐</Divider>}
        scrollableTarget="scrollableDiv"
      >


        <List
          dataSource={data}
          header={
            <Row style={{ display: "flex", flexDirection: "row", justifyContent: "space-around" }}>
              <Col style={{ flex: 1, textAlign: "center" }}>头像</Col>
              <Col style={{ flex: 1, textAlign: "center" }}>用户名</Col>
              {/* <Col style={{ flex: 1, textAlign: "center" }}>性别</Col> */}
              <Col style={{ flex: 1, textAlign: "center" }}>邮箱</Col>
              <Col style={{ flex: 1, textAlign: "center" }}>操作</Col>
            </Row>
          }
          itemLayout="horizontal"
          renderItem={item => (
            <List.Item key={item.id}
              actions={[<div style={{ flex: 1, textAlign: "center" }}><a key="list-loadmore-edit"
                onClick={() => {
                  console.log(item);

                  localStorage.setItem('option', 'update')
                  dispatch(changeInfo(item))
                  navigate('/admin/add', { replace: false, state: { option: "update", adminInfo: item } })
                }}
              >edit</a>, <a key="list-loadmore-more" onClick={() => {
                deleteAdmin(item.id.toString())
                  .then(result => {
                    window.location.reload()
                  })
              }}>delete</a></div>]}
            >
              <List.Item.Meta
                avatar={<Avatar style={{ flex: 1, textAlign: "center" }} src=
                  {item.icon[0].thumbUrl || item.icon} />}
              />
              <div style={{ flex: 1, textAlign: "center" }}>{item.user}</div>
              {/* <div style={{ flex: 1, textAlign: "center" }}>{item.gender}</div> */}
              <div style={{ flex: 1, textAlign: "center" }}>{item.email}</div>

            </List.Item>
          )}
        />
        {/* <Divider orientation="center">
          员工列表
        </Divider>
        <List
          header={
            <Row style={{ textAlign: "center" ,width:"100%"}}>
              <Col span={4}>af</Col>
              <Col span={4}>af</Col>
              <Col span={4}>af</Col>
              <Col span={6}>af</Col>
              <Col span={6}>af</Col>
            </Row>
          }
          footer={<div>Footer</div>}
          bordered
          dataSource={data}
          renderItem={item => (
            <List.Item key={item.id}>
              <React.Fragment>
                <Row style={{ textAlign: "center" }}>
                  <Col span={4}>af</Col>
                  <Col span={4}>af</Col>
                  <Col span={4}>af</Col>
                  <Col span={6}>af</Col>
                  <Col span={6}>af</Col>
                </Row>
              </React.Fragment>
            </List.Item>
          )}
        /> */}

      </InfiniteScroll>
    </div>
  );
};
